<template>
	<view class="home">
		<!-- banner 轮播 -->
		<Banner></Banner>
		<!-- 导航 -->
		<Nav :list="NavList"></Nav>
		<!-- 名厨、餐宴 -->
		<Chief></Chief>
		<!-- 服务 -->
		<Service></Service>
	</view>
</template>

<script>
	// 导入
	import Banner from "./Banner";
	import Nav from "./Nav";
	import Chief from "./Chief";
	import Service from "./Service";
	
	export default {
		data() {
			return {
				NavList:[] //顶部导航
			}
		},
		onLoad() {
			//uni中的生命周期：vue生命周期 + 微信小程序的生命周期，可以接收url中参数
		},
		created(){
			//1.获取导航数据
			//之前用法，通过回调函数取 异步执行的结果-存在回调深渊
			/* uni.request({
				url:"http://api.brqc.com.cn/shxmp/navlist",
				method:"get",
				//回调函数
				success:(res)=>{
					console.log("succ",res)
					//在发请求。
					
				},
				fail:(err)=>{
					console.log("err",err)
				},
				complete:(res)=>{
					console.log("comp",res)
				}
			}) */
			//用API Promise化风格来使用异步API-同同步方式写异步代码，解决回调深渊的问题
			//不传回调函数，直接返回一个Promise对象,通过then 或 async+await方式取结果
			/* let p = uni.request({
				url:"http://api.brqc.com.cn/shxmp/navlist",
				method:"get"
			})
			console.log(p) */
			
			/* uni.request({
				url:"http://api.brqc.com.cn/shxmp/navlist",
				method:"get"
			})
			.then(res=>{
				//res:是一个数组，第一个参数是错误对象，第二个参数是返回数据
				//Vue2 (我们用的是Vu2) 第二个参数是返回数据。此时使用 catch 是拿不到报错信息的.没有catch
				//Vue3 调用成功会进入 then 方法 回调。调用失败会进入 catch 方法
				console.log("ok",res)
				let result = res[1];
				console.log(result)
				this.NavList = result.data.data;
			}) */
			
			//使用Promise.all 处理多个异步请求
			let nav_data = uni.request({url:"http://api.brqc.com.cn/shxmp/navlist"})//导航
			let goods_data = uni.request({url:"http://api.brqc.com.cn/shxmp/goodslist"})//产品列表
			//Promise.all([promise对象1,promise对象2,...])
			Promise.all([nav_data,goods_data])
		    .then(res=>{
				//res 是每个Promise对象 then 的结果
				console.log("all ok",res)
				let res01 = res[0],res02=res[1];
				console.log(res01,res02)
				this.NavList = res01[1].data.data;//导航
			})
			.catch(err=>{
				console.log("all err",err)
			})
		},
		methods: {

		},
		components:{
			Banner,
			Nav,
			Chief,
			Service
		}
	}
</script>

<style lang="less">
	// less方式写css,单位同微信小程序，用rpx,布局推荐用flex
</style>
